<!--  -->
<template>
  <div class="mytodos">
    <!-- 标题开始 -->
    <div class="mytodos-top">
      <h1>todos</h1>
    </div>
    <!-- 标题结束 -->
    <!-- 内容开始 -->
    <div class="mytodos-content">
      <div class="mytodos-content-top">
        <div
          :class="['content-top-left', { allchecked: allChecked }]"
          @click.stop="allCheckClick"
        >
          ﹀
        </div>
        <div class="content-top-right">
          <input
            type="text"
            placeholder="What needs to be done?"
            @keyup.enter="addListClick"
            v-model="inputVal"
            v-focus
          />
        </div>
      </div>
      <div class="mytodos-content-middle">
        <div
          class="middle-list-item"
          v-for="(item, index) in filterTodos"
          :key="item.id"
        >
          <!-- 勾选 -->
          <div class="item-chexk">
            <input type="checkbox" name="" id="" v-model="item.status" />
          </div>
          <!-- 内容 -->
          <div
            :class="['item-text', { select: item.status }]"
            @dblclick="editTodo(index)"
          >
            <span :class="[{ hidden: edit_index === index }]">{{
              item.text
            }}</span>
            <input
              type="text"
              :class="[{ hidden: edit_index !== index }]"
              v-model="item.text"
              @blur="saveTodo"
            />
          </div>
          <!-- 删除列表项 -->
          <div class="item-close" @click.stop="clearClick(index)">×</div>
        </div>
      </div>
      <div class="mytodos-content-botton">
        <div class="content-botton-left">余{{ remaining }}项</div>
        <div class="content-botton-mid">
          <div
            @click.stop="stateClick('all')"
            :class="['botton-mid-left', { active: activeTab === 'all' }]"
          >
            全部
          </div>
          <div
            @click.stop="stateClick('active')"
            :class="['botton-mid-mid', { active: activeTab === 'active' }]"
          >
            激活
          </div>
          <div
            @click.stop="stateClick('complate')"
            :class="['botton-mid-right', { active: activeTab === 'complate' }]"
          >
            完成
          </div>
        </div>
        <div class="content-botton-right" @click.stop="clearComplate">
          清除已完成
        </div>
      </div>
    </div>
    <!-- 内容结束 -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { mapGetters, mapgetters } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      //activeTab: "all", // all active complate
      edit_index: -1, //-1表示没有编辑 0表示正在编辑这一行
      inputVal: "",

      //[
      //   {
      //     text:"玩游戏",
      //     status:true,
      //     id:1
      //   },
      //   {
      //     text:"拿高薪",
      //     status:false,
      //     id:2
      //   }
      // ]
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapGetters(["filterTodos", "allChecked", "remaining","activeTab"]),
    //剩下的项目个数
  },
  //监控data中的数据变化
  watch: {
    // todos: {
    //   handler: function (newTodos) {
    //     localStorage.setItem("todos", JSON.stringify(newTodos));
    //   },
    // },
    // deep: true,
  },
  //方法集合
  methods: {
    //清除这一项
    clearClick: function (index) {
      // this.todos.splice(index, 1);
      this.$store.commit({
        type:"clearTodo",
        payload:{
          index:index
        }
      })
    },
    //添加项目
    addListClick: function () {
      if (!this.inputVal) {
        this.$message({
          message: "输入不能为空",
          type: "warning",
        });
        return false;
      }
      this.$store.commit({
        type: "addTodo",
        payload: {
          text: this.inputVal,
          status: false,
          id: Date.now(),
        },
      });
      // this.todos.push({
      //   text:this.inputVal,
      //   status:false,
      //   id:Date.now(),
      // })
      this.inputVal = "";
    },
    //全选
    allCheckClick: function () {
      // this.allChecked=true;
      // let newTodos = JSON.parse(JSON.stringify(this.todos));
      // newTodos.map((v) => {
      //   v.status = true;
      // });
      // this.todos = newTodos;
      this.$store.commit("allCheckClick");
    },
    //双击编辑该项列表
    editTodo: function (index) {
      this.edit_index = index;
    },
    //编辑项目失去焦点保存修改后项目
    saveTodo: function () {
      this.edit_index = -1;
    },
    //底部功能栏筛选
    stateClick: function (activeTab) {
      // this.activeTab = activeTab;
      this.$store.commit({
        type:"changeActiveTab",
        payload:{
          activeTab
        }
      })
    },
    //清楚已完成
    clearComplate: function () {
      // let activeTodos = this.todos.filter((v) => {
      //   return !v.status;
      // });
      // this.todos = activeTodos;
      this.$store.commit("clearComplate")
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      },
    },
  },
};
</script>
<style lang='less' scoped>
.hidden {
  display: none;
}
.mytodos {
  width: 650px;
  margin: 0 auto;
  font-size: 24px;
  border: 2px solid #ccc;
  .mytodos-top {
    h1 {
      font-size: 30px;
    }
  }
  .mytodos-content {
    .mytodos-content-top {
      display: flex;
      height: 65px;
      line-height: 65px;
      box-sizing: border-box;
      border-bottom: 2px solid #ccc;
      .content-top-left {
        flex: 1;
        padding-top: 10px;
      }
      .allchecked {
        color: red;
      }
      .content-top-right {
        flex: 9;

        input {
          font-size: 24px;
          height: 50px;
          width: 100%;
          border: 0;
          outline: none;
        }
      }
    }
    .mytodos-content-middle {
      .middle-list-item {
        height: 65px;
        line-height: 65px;
        display: flex;
        border-bottom: 2px solid #ccc;
        box-sizing: border-box;
        .item-chexk {
          flex: 1;
          input {
            width: 20px;
            height: 20px;
          }
        }

        .item-text {
          flex: 8;
          text-align: left;
          input {
            outline: none;
            font-size: 24px;
            border: 0;
          }
        }
        .select {
          color: #ccc;
          text-decoration: line-through;
        }
        .item-close {
          visibility: hidden;
          flex: 1;
        }
      }
      .middle-list-item:hover {
        .item-close {
          visibility: visible;
          cursor: pointer;
          flex: 1;
        }
      }
    }
    .mytodos-content-botton {
      height: 65px;
      display: flex;
      font-size: 18px;
      text-align: center;
      line-height: 65px;
      .content-botton-left {
        flex: 2;
        text-align: left;
        padding-left: 15px;
      }

      .content-botton-mid {
        display: flex;
        flex: 6;
        justify-content: center;
        .botton-mid-mid {
          padding: 0 20px;
        }
        .botton-mid-left {
          padding: 0 20px;
        }
        .botton-mid-right {
          padding: 0 20px;
        }
        .active {
          border: 1px solid #ccc;
          padding: 0 20px;
          border-radius: 5px;
        }
      }

      .content-botton-right {
        flex: 2;
      }
    }
  }
}
</style>